<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    router
  >
    <div class="box">
      <h3>科技大学管理后台</h3>
    </div>
    <el-submenu index="/">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>首页管理</span>
      </template>

      <el-menu-item-group>
        <el-menu-item index="banners">
          <router-link :to="{ name: 'Banners' }">轮播图管理</router-link>
        </el-menu-item>
        <el-menu-item index="navs">
          <router-link :to="{ name: 'Navs' }">金刚区管理</router-link>
        </el-menu-item>
        <el-menu-item index="announcements">
          <router-link :to="{ name: 'Announcements' }"
            >管理员公告管理</router-link
          >
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>社区管理</span>
      </template>

      <el-menu-item-group>
        <el-menu-item index="posts">
          <router-link :to="{ name: 'Posts' }">社区帖子管理</router-link>
        </el-menu-item>
        <el-menu-item index="tags">
          <router-link :to="{ name: 'Tags' }">社区标签管理</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>商城管理</span>
      </template>

      <el-menu-item-group>
        <el-menu-item index="goods">
          <router-link :to="{ name: 'Goods' }">商品管理</router-link>
        </el-menu-item>
        <el-menu-item index="pisitions">
          <router-link :to="{ name: 'Pisitions' }">地址管理</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>用户管理</span>
      </template>

      <el-menu-item-group>
        <el-menu-item index="users">
          <router-link :to="{ name: 'Users' }">用户管理</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>订单管理</span>
      </template>

      <el-menu-item-group>
        <el-menu-item index="Order">
          <span>订单管理</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.el-menu {
  height: 760px;
}
.el-main {
  padding: 0 !important;
}
.el-menu-item a {
  text-decoration: none;
  color: #fff;
}
.el-menu-item a:active {
  color: red;
}
.box {
  width: 199px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  background-color: #474c54;
}
.box > h3 {
  margin: 0 !important;
}
</style>